<!-- 我的活动详情 -->
<template>
    <div class='about_wrapper'>
        <ul class="list_con">
            <li class="list_every">
                <div class="fbImg"><img class="top_img" :src="picUrl(DetailData.url)"></div>
                <div class="noticexx">
                    <div>{{DetailData.activityStatus}}</div>
                    <p>{{DetailData.title}}</p>
                </div>
                <div class="ys">
                    <p><img src="@/assets/activity/chakan.png" alt="">{{DetailData.browseTimes}}</p>
                    <p>报名：{{DetailData.signUpNumberAdd}}/{{DetailData.signUpNumber}}</p>
                </div>
                <div style="height:10px;background:#f7f7f7;margin:15px 0;"></div>
            </li>
        </ul>
        <div class="LowerPart">
            <div class="Situation">
                <div class="fk"></div>参与情况</div>
            <van-divider />
            <div class="signUp">
                <div><span>已报名（<span style="color:#ffdebd;">{{DetailData.signUpNumberAdd}}</span>）</span><img src="" alt=""></div>
            </div>
            <div class="Situation jl">
                <div class="fk"></div>活动信息</div>
            <van-divider />
            <div class="wenzi">
                <p>活动主题：{{DetailData.description}}</p>
                <p>活动时间：{{DetailData.createTime}}</p>
                <p>活动地点：<img src="@/assets/activity/dingweilv.png" alt=""><span>{{DetailData.adress}}</span></p>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        components: {
        },
        data() {
            return {
                DetailData: []
            };
        },
        //方法集合
        methods: {},
        created() {
            this.DetailData = this.$route.query.DetailData;
        }
    }
</script>
<style lang="scss" scoped>
    .list_con {
        padding: 0 8vw;
        .list_every {
            .fbCon {
                span:nth-child(1) {
                    color: red;
                    margin-right: 10px;
                }
            }
            .fbImg {
                margin-top: 15px;
                height: 45vw;
                .top_img {
                    display: block;
                    width: 84vw;
                    height: 40vw;
                }
            }
            .noticexx {
                display: flex;
                margin-top: 15px;
                align-items: center;
                div:nth-child(1) {
                    padding: 1.5vw 3vw;
                    background: #e7983c;
                    color: #ffffff;
                    vertical-align: bottom;
                    font-size: 12px;
                    border-radius: 12px;
                    margin-right: 5px;
                }
            }
            .ys {
                margin-top: 15px;
                display: flex;
                p:nth-child(1){
                    margin-right: 15px;
                    img{
                        width: 20px;
                        vertical-align: bottom;
                        display: inline-block;
                        margin-right: 5px;
                    }
                }
            }
        }
    }
    .LowerPart {
        padding: 15px 0;
        padding: 0 8vw;
        .Situation {
            width: 90vw;
            display: flex;
            font-size: 18px;
            .fk {
                width: 6px;
                height: 25px;
                background: red;
                margin-right: 10px;
            }
        }
        .jl {
            margin-top: 20px;
        }
        .signUp {
            width: 90vw;
            display: flex;
            justify-content: space-between;
            .ckqb {
                color: #2970f9;
            }
            img {
                width: 20px;
                height: 20px;
                vertical-align: middle
            }
        }
        .wenzi {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            p {
                margin-bottom: 20px;
            }
            p:nth-child(3) {
                img {
                    display: inline-block;
                    margin-right: 5px;
                    width: 20px;
                    height: 20px;
                    vertical-align: middle;
                }
                span {
                    color: #333333;
                    font-weight: 700;
                }
            }
        }
        .wybm {
            width: 90vw;
            height: 40px;
            line-height: 40px;
            color: #ffffff;
            background: #16a1f7;
            text-align: center;
        }
    }
</style>